import ReactDOM from 'react-dom';
import React from 'react';
import { api } from 'js/api/api';
import { userData } from 'js/core/userData';
import { Link, browserHistory } from 'react-router';
import './login.scss';

class Login extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        let username = this.refs.username.value;
        api('userLogin', { username: username }, (err, data) => {
            if (err === 0) {
                userData.set('sid', data.sid);
                userData.set('username', data.username);
                browserHistory.push('playerSelect');
            }
        });
        return false;
    }
    render() {
        return <form onSubmit={this.handleSubmit} id="login">
            <div className="title">不可诗意の冒险</div>
            <input placeholder="用户名" ref="username" className="common" />
            <div className="button flex-vcenter jc-between">
                <button className="common">登陆</button>
                <Link to={"register"} className="link">注册</Link>
            </div>
        </form>
    }
};

class Register extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        let username = this.refs.username.value;
        api('userRegister', { username: username }, (err, data) => {
            if (err === 0) {
                browserHistory.push('login');
            }
        });
        return false;
    }
    render() {
        return <form onSubmit={this.handleSubmit} id="login">
            <div className="title">不可诗意の冒险</div>
            <input placeholder="用户名" ref="username" className="common" />
            <div className="button flex-vcenter jc-between">
                <button className="common">注册</button>
                <Link to={"login"} className="link">登陆</Link>
            </div>
        </form>
    }
};

export {
    Login, Register
};